- page_title s_('AdminArea|Instance OAuth applications')

= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
  - c.with_header do
    .gl-new-card-title-wrapper.gl-flex-direction-column
      %h3.gl-new-card-title
        =  s_('AdminArea|Instance OAuth applications')
        .gl-new-card-count
          = sprite_icon('applications', css_class: 'gl-mr-2')
          = @applications.size
      %p.gl-new-card-description
        - docs_link_path = help_page_path('integration/oauth_provider')
        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
        = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }

    .gl-new-card-actions
      = render Pajamas::ButtonComponent.new(size: :small, href: new_admin_application_path, button_options: { data: { qa_selector: 'new_application_button' } }) do
        = _('Add new application')
  - c.with_body do
    - if @applications.empty?
      %section.empty-state.gl-my-5.gl-text-center.gl-display-flex.gl-flex-direction-column
        .svg-content.svg-150
          = image_tag 'illustrations/empty-state/empty-admin-apps-md.svg', class: 'gl-max-w-full'

        .gl-max-w-full.gl-m-auto
          %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
          %p.gl-text-secondary.gl-mt-3= s_('AdminArea|Manage applications for your instance that can use GitLab as an OAuth provider, start by creating a new one above.')
    - else
      .table-holder
        %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
          %thead
            %tr
              %th= _('Name')
              %th= _('Callback URL')
              %th= _('Trusted')
              %th= _('Confidential')
              %th= _('Actions')
          %tbody.oauth-applications
            - @applications.each do |application|
              %tr{ id: "application_#{application.id}" }
                %td{ data: { label: _('Name') } }= link_to application.name, admin_application_path(application)
                %td{ data: { label: _('Callback URL') } }= application.redirect_uri
                %td{ data: { label: _('Trusted') } }= application.trusted? ? _('Yes'): _('No')
                %td{ data: { label: _('Confidential') } }= application.confidential? ? _('Yes'): _('No')
                %td{ data: { label: _('Actions') } }
                  = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), size: :small, button_options: { class: 'gl-mr-3' }) do
                    = _('Edit')
                  = render 'delete_form', application: application

= paginate @applications, theme: 'gitlab'

.js-application-delete-modal
